<import from="./package-info-view/package-info-view"></import>

<template as-custom-element="loader"
          class="flex-grow-1 d-flex flex-column align-items-center justify-content-center">
    <div>
        Loading...
    </div>
    <div class="progress mt-3"
         style="width: 200px; height: 8px">
        <div class="progress-bar progress-bar-striped progress-bar-animated"
             role="progressbar"
             style="width: 100%"></div>
    </div>
</template>

<template as-custom-element="error"
          class="text-red text-center flex-grow-1 d-flex flex-column align-items-center justify-content-center">
</template>

<template as-custom-element="packages" class="flex-grow-height-restricted d-flex flex-column">
    <bindable name="packages"></bindable>
    <bindable name="selectedPackage"></bindable>
    <bindable name="descriptions"></bindable>

    <div class="list-group flex-grow-height-restricted overflow-y-auto">
        <div class="list-group-item list-group-item-action package ${selectedPackage === package ? 'active' : ''}"
             repeat.for="package of packages"
             click.trigger="selectedPackage = package">
            <div class="package-container">
                <div class="package-description">
                    <h6 class="d-flex align-items-center">
                        <img class="me-3"
                             src.bind="package.iconUrl || 'https://www.nuget.org/Content/gallery/img/logo-og-600x600.png'"
                             style="height: 24px;"/>
                        <b>
                            ${package.title}
                            <small>
                                (${package.version})
                            </small>
                            <small class="text-blue"
                                   if.bind="package.latestAvailableVersion && package.latestAvailableVersion !== package.version"
                                   title="There is a later version of this package: v${package.latestAvailableVersion}">
                                <i>${package.latestAvailableVersion}</i>
                            </small>
                        </b>
                    </h6>

                    <p class="text-truncate-3-lines" if.bind="descriptions">${package.description}</p>
                    <small class="text-warning" show.bind="package.installReason === 'Dependency'">
                        Installed as a dependency
                    </small>
                </div>
                <div class="package-actions">
                    <au-slot name="actions"></au-slot>
                </div>
            </div>
        </div>
    </div>
    <au-slot name="bottom"></au-slot>
</template>

<div class="d-flex flex-row flex-grow-height-restricted">
    <!-- CACHED PACKAGES -->
    <div id="cached-packages" class="d-flex flex-column column">
        <div class="column-header justify-content-between">
            <span title="These are packages that exist on your device"
                  style="font-size: 1.1rem">Local Cache (${cachedPackages.length})</span>
            <div class="form-check" title="Show packages that were installed as dependencies of other packages">
                <input id="show-deps-checkbox" class="form-check-input" type="checkbox"
                       checked.bind="showAllCachedDeps">
                <label class="form-check-label" for="show-deps-checkbox">
                    Show dependencies
                </label>
            </div>
        </div>

        <div promise.bind="cacheLoadingPromise" class="flex-grow-height-restricted d-flex flex-column">
            <loader pending></loader>
            <packages then
                      packages.bind="cachedPackages"
                      selected-package.two-way="selectedPackage"
                      descriptions.bind="showDescriptions">
                <div au-slot="actions" class="btn-group btn-group-sm">
                    <let package.bind="$host.package"></let>

                    <button type="button"
                            class="btn ${package.referenced ? 'btn-success' : 'btn-secondary'}"
                            title="Add to Script"
                            click.trigger="referencePackage(package)">
                        <i class="add-package-icon" show.bind="!package.referenced"></i>
                        ${package.referenced ? 'Referenced' : 'Reference'}
                    </button>
                    <button type="button"
                            class="btn btn-secondary dropdown-toggle"
                            data-bs-toggle="dropdown">
                    </button>
                    <ul class="dropdown-menu">
                        <li title="Delete from local cache"
                            click.trigger="deleteFromCache(package)">
                            <button class="dropdown-item btn btn-link">
                                <i class="delete-icon"></i>
                                Delete
                            </button>
                        </li>
                    </ul>
                </div>
            </packages>
        </div>
    </div>

    <!-- PACKAGE SEARCH -->
    <div id="package-search" class="d-flex flex-column column">
        <div class="column-header">
            <input class="form-control"
                   type="search"
                   placeholder="Search packages..."
                   value.bind="searchTerm & debounce:400"/>
            <select class="form-select ms-2" style="max-width: 100px" value.bind="searchTake">
                <option model.bind="15">15 results</option>
                <option model.bind="30">30 results</option>
                <option model.bind="50">50 results</option>
            </select>
        </div>

        <div promise.bind="searchLoadingPromise" class="flex-grow-height-restricted d-flex flex-column">
            <loader pending></loader>
            <packages then
                      packages.bind="searchResults"
                      selected-package.two-way="selectedPackage"
                      descriptions.bind="showDescriptions">
                <div au-slot="actions" class="d-flex align-items-center justify-content-end">
                    <let package.bind="$host.package"></let>

                    <div class="btn-group btn-group-sm" show.bind="!package.isInstalling">
                        <button type="button"
                                class="btn ${package.referenced ? 'btn-success' : 'btn-secondary'}"
                                title="Add to Script"
                                click.trigger="referencePackage(package)">
                            <i class="add-package-icon" show.bind="!package.referenced"></i>
                            ${package.referenced ? 'Referenced' : 'Reference'}
                        </button>
                        <button type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown">
                        </button>
                        <ul class="dropdown-menu">
                            <li title="Download to local cache without referencing the package"
                                show.bind="!package.existsInLocalCache"
                                click.trigger="installPackage(package)">
                                <button class="dropdown-item btn btn-link">
                                    <i class="download-package-icon"></i>
                                    Download Only
                                </button>
                            </li>
                            <li title="Reference a specific version"
                                click.trigger="selectPackageVersionToInstall(package)">
                                <button class="dropdown-item btn btn-link">
                                    <i class="add-package-specific-icon"></i>
                                    Reference Specific Version
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div class="progress w-100"
                         show.bind="package.isInstalling"
                         style="height: 10px;">
                        <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated"
                             role="progressbar"
                             style="width: 100%"></div>
                    </div>
                </div>
                <div au-slot="bottom">
                    <div class="d-flex justify-content-between search-bottom-bar">
                        <button class="btn btn-sm btn-link"
                                click.trigger="goToPreviousPage()"
                                disabled.bind="searchCurrentPage === 1"
                                title="Go to the previous page of results">
                            Previous
                        </button>
                        <div class="d-flex gap-4 align-items-center">
                            <div class="form-check" title="Check to show descriptions">
                                <input id="showDescriptions"
                                       class="form-check-input"
                                       type="checkbox"
                                       checked.bind="showDescriptions">
                                <label class="form-check-label" for="showDescriptions">
                                    Descriptions
                                </label>
                            </div>
                            <div class="form-check" title="Check to include pre-release versions results">
                                <input id="searchPrereleases"
                                       class="form-check-input"
                                       type="checkbox"
                                       checked.bind="searchPrereleases">
                                <label class="form-check-label" for="searchPrereleases">
                                    Pre-releases
                                </label>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-link"
                                click.trigger="goToNextPage()"
                                disabled.bind="searchResults.length < searchTake"
                                title="Go to the next page of results">
                            Next
                        </button>
                    </div>
                </div>
            </packages>
            <error catch>
                Could not load search results. Check your internet connection.
            </error>
        </div>
    </div>

    <!-- PACKAGES INFO -->
    <div id="package-info" class="column overflow-y-auto">
        <package-info-view package.bind="selectedPackage"></package-info-view>
    </div>
</div>

<div class="package-version-picker-modal-wrapper d-flex align-items-center justify-content-center"
     if.bind="showVersionPickerModal">
    <div class="package-version-picker-modal d-flex flex-column">
        <h5 class="mb-3">Select a version:</h5>
        <div class="list-group flex-grow-height-restricted overflow-y-auto" if.bind="versionsToPickFrom.length">
            <div class="list-group-item list-group-item-action"
                 repeat.for="version of versionsToPickFrom"
                 click.trigger="selectedVersion === version ? selectedVersion = null : selectedVersion = version">
                ${version}
                <i class="text-success check-circle-icon float-end"
                   show.bind="version === selectedVersion"></i>
            </div>
        </div>
        <p else class="flex-grow-height-restricted d-flex align-items-center justify-content-center">
            Fetching versions...
        </p>
        <div class="text-end mt-3">
            <div class="text-end mt-3">
                <button class="btn btn-primary ${!selectedVersion ? 'disabled' : ''}"
                        click.trigger="referencePackage(selectedPackage, selectedVersion)">
                    Confirm
                </button>
                <button class="btn-cancel btn btn-secondary" click.trigger="showVersionPickerModal = false">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div portal="#buttons" if.bind="configStore.selectedTab.route === 'packages'">
    <button class="btn btn-secondary" click.trigger="openCacheDirectory()">Open Cache Folder</button>
    <button class="btn btn-secondary" click.trigger="purgeCache()">Purge Cache</button>
</div>
